<script setup>
import { ref } from "vue";

const searchVal = ref(null);
// const buttonList = ref([]);
defineProps({
  buttonList: {
    type: Array,
    default: () => [],
  },
});

const emits = defineEmits(["callFunction"]);

const callFunc = (item) => {
  item.search = searchVal.value;
  emits("callFunction", item);
};
</script>

<template>
  <el-col v-if="buttonList != null && buttonList.length > 0" :span="24" class="toolbar">
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="searchVal" placeholder="请输入内容"></el-input>
      </el-form-item>
      <!-- 页面中所有的按钮 -->
      <el-form-item v-for="item in buttonList" :key="item.id">
        <el-button :type="
            item.func &&
            (item.func.toLowerCase().indexOf('handledel') != -1 ||
              item.func.toLowerCase().indexOf('stop') != -1)
              ? 'danger'
              : 'primary'
          " v-if="!item.IsHide" @click="callFunc(item)">{{ item.name }}</el-button>
      </el-form-item>
    </el-form>
  </el-col>
</template>

<style lang="scss">
.toolbar {
  margin-top: 10px;
}
.el-form--inline {
  .el-form-item {
    margin-right: 10px;
  }
}
</style>